<template>
    <div class="box">
        <div class="left-box">
            <div class="particulars">
                <div class="classname">访客名：</div>
                <div>{{routeMsg.username}}</div>
            </div>
            <div class="particulars">
                <div class="classname">部门：</div>
                <div>{{routeMsg.department}}</div>
            </div>
            <div class="particulars">
                <div class="classname">手机号：</div>
                <div>{{routeMsg.mobile}}</div>
            </div>
            <div class="particulars">
                <div class="classname">身份证号：</div>
                <div>{{routeMsg.card}}</div>
            </div>
            <div class="particulars">
                <div class="classname">车牌号：</div>
                <div>{{routeMsg.carnumber}}</div>
            </div>
            <div class="particulars">
                <div class="classname">进校时间：</div>
                <div>{{routeMsg.starttime}}</div>
            </div>
            <div class="particulars">
                <div class="classname">离校时间:</div>
                <div>{{routeMsg.endtime}}</div>
            </div>
            <div class="particulars">
                <div class="classname">状态:</div>
                <div v-if="routeMsg.status==0" class="audit">
                    待初审
                </div>
                <div v-if="routeMsg.status==1" class="audit">
                     一审
                </div>
                <div v-if="routeMsg.status==2" class="audit">
                    二审
                </div> 
                <div v-if="routeMsg.status==3" class="audit">
                    终审
                </div>         
            </div>
            <div class="particulars">
                <div class="classname">类型：</div>
                <div>{{routeMsg.reason}}</div>
            </div>
            <div class="particulars">
                <div class="classname">是否去过高风险区:</div>
                <div>否</div>
            </div>
            <div class="particulars">
                <div class="classname">是否接触过高风险区:</div>
                <div>否</div>
            </div>
            <div class="particulars">
                <div class="classname">是否离京:</div>
                <div>否</div>
            </div>
            <div class="particulars">
                <div class="classname">地址:</div>
                <div>{{routeMsg.address}}</div>
            </div>
        </div>
        <div class="right-box">
            <div class="rightbox">
                <div class="classname">行程码:</div>
                <div>
                    <img src="../../../public/images/bj.jpg" alt="">
                </div>
            </div>
            <div class="rightbox">
                <div class="classname">健康码:</div>
                <div>
                    <img src="../../../public/images/bj.jpg" alt="">
                </div>
            </div>
            <div class="rightbox">
                <div class="classname">核酸:</div>
                <div>
                    <img src="../../../public/images/bj.jpg" alt="">
                </div>
            </div>
            <div class="rightbox">
                <div class="classname">疫苗:</div>
                <div>
                    <img :src="routeMsg.travelcode" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref , reactive,onBeforeMount,toRefs} from 'vue';
// 路由接收参数
import {useRoute} from 'vue-router';
const route = useRoute();
// 接收路由传入的参数
let routeMsg = reactive<any>('');
if(route.query.userlist){      
    routeMsg = route.query.userlist ;
    routeMsg=JSON.parse(routeMsg) 
    console.log(routeMsg)
}


</script>

<style scoped lang="less">
.box{
    width: 700px;
    height: 100%;
    display: flex;
    .left-box{
        flex: 1;
        height: 100%;
        // background-color: darkblue;
        .particulars{
            width: 100%;
            height: 62px;
            // background-color: rebeccapurple;
            display: flex;
            div{
                flex: 1;
                display: flex;
                font-size: 14px;
                align-items: center;
                padding-right: 10px;
            }
            .classname{
                flex-direction: row-reverse;

            }
        }
    }
    .right-box{
        flex: 1;
        height: 100%;
        // background-color: forestgreen;
        .rightbox{
            width: 100%;
            height: 168px;
            // background-color: rebeccapurple;
            display: flex;
            div{
                flex: 1;
                font-size: 14px;
            }
            .classname{
                display: flex;
                flex-direction: row-reverse;
                padding-top: 30px;
            }
            img{
               
                width: 90px;
                height: 90px;
                margin-left: 20px;
                margin-top: 40px;
            }
        }
    }
}
</style>